// 状态就是数据,但是react的状态与vue的响应式不同
// 类组件可以写在state中
import { Component, useState } from "react";

// 类写法
// class DemoA extends Component {
//     constructor() {
//         super()
//         // state数据只能写在constructor中
//         this.state = {
//             count: 1
//         }
//     }
//     add() {
//         // 注意，在v18，不管什么时候的setState都是异步函数，但是在v16和v17，不一定全是异步，也有可能是同步

//         // console.log(this);
//         // this.state.count++  //直接改state中的数据时不会让render函数再次执行的
//         // // render函数无法执行，那么就不会重新渲染页面 直接改数据是不行的
//         // console.log(this.state.count);
//         // console.log(this.state.count);
//         // 在类组件中，有专门的用来改变state中的数据，可以触发reder函数再次渲染
//         // this.setState({
//         // 最好不要直接改变state中的数据，通过setState来改变
//         // count: this.state.count + 1
//         // count: ++this.state.count //这种方法虽然可以改变state中的数据，而且模板也更新了，但是执行了两次
//         // 一次是++this.state.count自己就直接改变了state中的数据，他的整体是新值
//         // 另一次就是通过 count再次给this.state.count赋值，这次是间接的
//         // count: this.state.count++ //这种就是完全不起效的，因为this.state.count++整体就是旧值
//         // })

//         // setState的另一种写法，这种写法不仅可以省去this,而且有其他的用处
//         // state表示旧值
//         // this.setState((state) => {
//         //     return {
//         //         count: state.count + 1
//         //     }

//         // })
//         // 简写
//         // this.setState(state => ({ count: state.count + 1 }), () => { console.log("---> 1", this.state.count); })
//         // this.setState(state => ({ count: state.count + 1 }), () => { console.log("---> 2", this.state.count); })


//         // setState中有两种书写方式，直接{}的适合就是新的数据与旧数据没有关系时使用  (state)=>({}) 这种就适合新值由旧值计算而来，而state永远表示旧值
//         // 最后  这两个方法都有一个回调函数callback,都是在状态修改完后自动执行的函数


//         // v18与他之前的版本为什么在异步同步时不同,这是为了提升性能
//         // 因为setState都是异步的,那么在v18中就可以将所有的setState都放在一起执行,这个叫并发模式
//         // 在v18中,所有的setState会自动合并  就是计算都分别计算了,但是最后拿数据时,是在一起拿的数据
//         // 将几个setState捆在一起,功能是都起,但是引起的效果是只有一个,免得浪费性能

//         // 想在监听器中获取this,有两种方法,利用bind手动绑定this  利用ES6的箭头函数自动绑定this
//         // 想要在箭头函数中获取事件对象,就需要自己写一个e
//     }
//     render() {
//         // 尝试修改数据
//         let { count } = this.state
//         console.log('render');
//         return (
//             <>
//                 <div>{count}</div>
//                 {/* 注意这样写的话再这个add事件内，this没有指向 */}
//                 {/* <button onClick={this.add}>+1</button> */}
//                 {/* <button onClick={this.add.bind(this)}>+1</button> */}
//                 <button onClick={() => this.add()}>+1</button>
//             </>
//         )
//     }
// }

// 函数式写法
// 函数式写法简洁很多
// function DemoA() {
//     let [count, setcount] = useState(1)
//     let [list, setlist] = useState([])

//     let add = () => {
//         // 类写法有很多不同的地方,但是与函数写法也有相同的地方,像是改变数据的set都是异步
//         // setcount(count + 1)
//         // 另一种写法 _表示旧值
//         // [count, setcount] = useState(1) 就已经将count和setcount绑定起来了
//         setcount(_ => _ + 1)
//     }
//     return (
//         <>
//             <div>{count}</div>
//             <button onClick={add}>+1</button>
//         </>
//     )
// }


// 条件渲染
// 条件渲染也就是根据状态来改变模板的显示
// class DemoA extends Component {
//     constructor() {
//         super()
//         this.state = {
//             flag: true
//         }
//     }
//     render() {
//         let { flag } = this.state
//         return (
//             <>
//                 <div>{1111}</div>
//                 {
//                     flag && (
//                         <h1>这是h1</h1>
//                     )
//                 }
//             </>
//         )
//     }

// }

// class DemoA extends Component {
//     constructor() {
//         super()
//         this.state = {
//             flag: true
//         }
//     }
//     render() {
//         let { flag } = this.state
//         return (
//             <>
//                 <div>{1111}</div>
//                 {
//                     flag && (
//                         <h1>这是h1</h1>
//                     )
//                 }
//                 <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>改变状态</button>

//             </>
//         )
//     }

// }


// class DemoA extends Component {
//     constructor() {
//         super()
//         this.state = {
//             flag: true
//         }
//     }
//     render() {
//         let { flag } = this.state
//         return (
//             <>
//                 <div>{1111}</div>
//                 {flag ? <h1>h1</h1> : <h2>h2</h2>}
//                 {
//                     flag && (
//                         <h1>这是h1</h1>
//                     )
//                 }
//                 <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>改变状态</button>

//             </>
//         )
//     }

// }

class DemoA extends Component {
    constructor() {
        super()
        this.state = {
            flag: true
        }
    }
    render() {
        let { flag } = this.state
        return (
            <>
                <div style={{ display: flag ? "block" : "none" }}>{1111}</div>
                <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>改变状态</button>

            </>
        )
    }

}



export default DemoA;